import React, { Component } from 'react';
import BreadcrumbCustom from '../BreadcrumbCustom';
import { Row, Col, Card, Modal, Button } from 'antd';

class Modals extends Component {
  state = {
    visible: false,
  };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  handleCancel = (e: React.MouseEvent<HTMLElement>) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  render() {
    return (
      <div className="py-3">
        <BreadcrumbCustom first="UI" second="对话框" />
        <Row gutter={16} className="mt-3">
          <Col md={24}>
            <Card bordered={false}>
              <div>
                <Button type="primary" onClick={this.showModal}>
                  基本用法
                </Button>
                <Modal
                  title="Basic Modal"
                  visible={this.state.visible}
                  onOk={this.handleOk}
                  onCancel={this.handleCancel}
                >
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                  <p>Some contents...</p>
                </Modal>
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    );
  }
}

export default Modals;
